import React from 'react'
import './index.css'
export default function Footer(props) {
  const {todos} = props
  const total = todos.length
  let doneCount = todos.reduce((prev, current) => {
      return prev + (current.done ? 1: 0)
  },0)
 //全选状态
  let handleAllCheck = (event)=> {
      console.log("全选")
      //通知app更改全选状态
      props.checkAllTodo(event.target.checked)
  }
  
  //清除已完成任务
  let hanleClearAllDone = ()=>{
      props.clearAllDone()
  }
  return (
    <div className="todo-footer">
    <label>
      <input type="checkbox" checked={doneCount === total && total !== 0}  onChange = {handleAllCheck} />
    </label>
    <span>
      <span>已完成：{doneCount}</span> / 全部：{total}
    </span>
    <button className="btn btn-danger" onClick={hanleClearAllDone} >清除已完成任务</button>
  </div>
  )
}
